<template>
  <div class='total-sales'>
    <common-card title="累计订单量"
                 :value="orderToday">
      <template>
        <v-chart :options="getOptions()"></v-chart>
        <!-- <div id="total-order-chart" ref="totalOrderChart" :style="{width: '100%',height: '100%'}"></div> -->
      </template>
      <template v-slot:footer>
        <span>昨日订单量 </span>
        <span class="emphasis">{{orderLastDay}}</span>
      </template>
    </common-card>
  </div>
</template>
<script>
import CommonCardMixin from '../../mixins/commonCardMixin'
import CommonDataMixin from '../../mixins/commonDataMixin'
export default {
  mixins: [CommonCardMixin, CommonDataMixin],
  methods: {
    getOptions () {
      return this.orderTrend.length > 0 ? {
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false// 默认情况下会距离X轴有小小的边距，需要设置false去掉边距
        },
        yAxis: {
          show: false
        },
        series: [
          {
            type: 'line',
            data: this.orderTrend,
            areaStyle: {
              color: 'purple'
            },
            lineStyle: {
              width: 0
            },
            itemStyle: {
              opacity: 0
            },
            smooth: true
          }
        ],
        grid: {
          top: 0,
          bottom: 0,
          right: 0,
          left: 0
        }
      } : null
    }
  }
}
</script>
